<template>
  <!-- 总的 -->
  <div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          prop="learningTaskName"
          label="作业名称"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="address" label="查看详情" align="center">
          <el-button type="text" @click="info">详情</el-button>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      top="4%"
      title="体育知识&资讯审核详情"
      :visible.sync="dialogFormVisible"
      width="80%"
    >
      <el-form label-width="100px">
        <div class="common">
          <el-form-item label="所属分类：" prop="phtId">
            <el-select v-model="form.phtId" style="width: 100%">
              <el-option
                v-for="item in infoType"
                :value="item.pid"
                :key="item.pid"
                :label="item.pname"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作者：" prop="phAuthor">
            <el-input v-model="form.phAuthor"></el-input>
          </el-form-item>
        </div>
        <div class="common">
          <el-form-item label="标题：" prop="phTitle">
            <el-input v-model="form.phTitle"></el-input>
          </el-form-item>
          <el-form-item label="来源：" prop="phSource">
            <el-input v-model="form.phSource"></el-input>
          </el-form-item>
        </div>
        <div class="common">
          <el-form-item label="概述：" prop="phSummarize">
            <el-input type="textarea" v-model="form.phSummarize"></el-input>
          </el-form-item>
          <el-form-item label="关键字：" prop="phKeyWork">
            <el-input v-model="form.phKeyWork"></el-input>
          </el-form-item>
        </div>
        <div class="common">
          <div class="commons">
            <el-form-item label="排序：" prop="phSort">
              <el-input
                :min="1"
                type="number"
                v-model.number="form.phSort"
                style="width: 100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="置顶：">
              <el-checkbox v-model="form.phTop" name="name"></el-checkbox>
            </el-form-item>
            <el-form-item label="列表隐藏：">
              <el-checkbox v-model="form.phConceal" name="name"></el-checkbox>
            </el-form-item>
          </div>
          <el-form-item
            style="margin-left: 30%"
            label="详情："
            prop="phParticulars"
          >
            <el-input type="textarea" v-model="form.phParticulars"></el-input>
          </el-form-item>
        </div>
        <div class="common">
          <el-form-item label="封面图:">
            <el-upload
              class="upload-demo"
              drag
              v-loading="loading"
              :on-success="picUpload"
              :before-upload="beforeUpload"
              :action='$env.BASE_URL+"/homework/zhty/public/import_file"'
              multiple
              :headers="{
                'access-token': $store.state.user.TOKEN,
              }"
            >
              <div v-if="!form.phPic">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                  <div class="el-upload__tip" slot="tip">只能上传图片文件</div>
                </div>
              </div>
              <img
                style="
                  width: auto;
                  height: auto;
                  max-height: 100%;
                  max-width: 100%;
                "
                v-if="form.phPic"
                :src="$store.state.user.BASE_URL + form.phPic"
                alt=""
              />
            </el-upload>
          </el-form-item>
          <el-form-item label="视频:">
            <el-upload
              class="upload-demo"
              drag
              v-loading="loading1"
              :on-success="videoUpload"
              :before-upload="beforeUpload1"
              :action='$env.BASE_URL+"/homework/zhty/public/import_file"'
              multiple
              :headers="{
                'access-token': $store.state.user.TOKEN,
              }"
            >
              <div v-if="!form.phVideo">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </div>
              <video
                style="
                  width: auto;
                  height: auto;
                  max-height: 100%;
                  max-width: 100%;
                "
                v-if="form.phVideo"
                :src="$store.state.user.BASE_URL + form.phVideo"
              />
            </el-upload>
          </el-form-item>
        </div>
        <div class="common">
          <el-form-item label="链接地址：" prop="phLinkAddress">
            <el-input v-model="form.phLinkAddress"></el-input>
          </el-form-item>
          <el-form-item label="链接有效期：" prop="time">
            <el-date-picker
              style="width: 100%"
              v-model="form.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <div class="paging">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  homeworkAuditList,
  homeworkAuditDetails,
  learningWorkPass,
} from "@/api/platformAudit";
export default {
  data() {
    return {
      total: -1,
      page: {
        pageSize: 10,
        pageNum: 1,
      },
      dialogFormVisible: false,
      form: {
        item: null,
        phtId: "",
        phTitle: "",
        phSummarize: "",
        phSort: 1,
        phTop: null,
        phPic: "",
        phVideo: "",
        phConceal: null,
        phAuthor: "",
        phSource: "",
        phKeyWork: "",
        phParticulars: "",
        phLinkAddress: "",
        time: [],
      },
      tableData: [
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
        {
          date: "开合跳三十分钟",
        },
      ],
    };
  },
  created() {
    this.gethomeworkAuditList();
  },
  methods: {
    handle(row) {
      this.dialogVisible = true;
    },
    changeSize(size) {
      this.page.pageSize = size;
      this.getTeacherList();
    },
    changePage(page) {
      this.page.pageNum = page;
      this.getTeacherList();
    },
    gethomeworkAuditList() {
      let data = { ...this.page };
      homeworkAuditList(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
          this.total = res.total;
        }
      });
    },
    info() {
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.paging {
  display: flex;
  justify-content: flex-end;
}
.common {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .el-form-item {
    flex: 1;
  }
  .el-upload {
    width: 100%;
    ::v-deep .el-upload-dragger {
      width: 100%;
    }
  }
}
.commons {
  display: flex;
  width: 20%;
}
::v-deep .el-upload-list__item {
  display: none;
}
::v-deep .el-upload--text {
  width: 100%;
}
::v-deep .el-upload-dragger {
  width: 100%;
}
::v-deep .el-upload__tip {
  margin-top: -12px;
}
</style>
